<template>
	<view class="add-SA">
		<view class="SA-personal">
			<view class="bottom-msg">
				<view class="list-item">
					<view class="item-1 item">
						<view class="left">
							收货人
						</view>
						<view class="right">
							<input type="text" v-model="shipItem.name" placeholder="收货人姓名" placeholder-style="font-size: 24upx; color:#999; font-weight: 100;" />
						</view>
					</view>

					<view class="item-2 item">
						<view class="left">
							手机号码
						</view>
						<view class="right">
							<input type="number" maxlength="11" v-model="shipItem.phone" placeholder="收货人联系方式" placeholder-style="font-size: 24upx; color:#999; font-weight: 100;" />
						</view>
					</view>

					<view class="item-3 item" style="position: relative;">
						<view class="left">
							所在省市
						</view>
						<view class="right">
							<view class="" @tap="changeShow('QS_Picekr_city')">
								{{`${shipItem.province}-${shipItem.city}-${shipItem.district}`}}
							</view>
							<QSpicker type="city" ref="QS_Picekr_city" :dataSet="citySet" pickerId="city_1" @confirm="confirm" />

						</view>
					</view>
					
					<view class="item-1 item">
						<view class="left">
							地区定位
						</view>
						<view @click="selectOption" class="right">
							{{shipItem.map_name}}
						</view>
					</view>

					<view class="item-2 item detail-address">
						<view class="left">
							详细地址:
						</view>
						<view class="right textarea-box">
							<textarea v-model="shipItem.address" auto-height="true" placeholder-style="font-size: 24upx; color:#999; font-weight: 100;padding-top:8upx"
							 placeholder="如道路、门牌号、小区、楼栋号" />
						</view>
					</view>
					
		      <view class="mr-address">
		        <view class="ad-left">
		          设为默认地址
		        </view>
		        <view class="ad-right">
		          <checkbox-group @change="onCheckBox" >
		          <label>
		            <checkbox color="#FF557D" :checked="1 == shipItem.is_default" value="1"/>
		          </label>
		          </checkbox-group>
		        </view>
		      </view>
					
					
		    </view>
		  </view>
		  <view class="SAC-btn">
		    <button type="default" size="mini" class="sc-button" @click="delAddress">删除</button>
				<button type="default" size="mini" class="qr-button" @click="setAddress">确认</button>
		  </view>
		</view>
		</view>
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue';
	export default {
		components:{
			QSpicker
		},
		data() {
			return {
				position:"请选择地址~",
				shipItem: {},
				citySet: {
					defaultValue: [0, 0, 0],
				},
			};
		},
		onLoad(option) {
			this.shipItem = JSON.parse(option.item) || {};
			// this.citySet.defaultValue = eval('('+ this.shipItem.area_ids + ')');
			this.citySet.defaultValue = this.shipItem.address_id;
			console.log(this.shipItem);
		},
		methods: {
			selectOption(){
				uni.chooseLocation({
					success: (res) => {
						console.log(res)
						this.position = res.name;
						this.shipItem.longitude = res.longitude
						this.shipItem.latitude = res.latitude
						this.shipItem.map_name = res.name
						// uni.setStorageSync('lph-address', {
						// 	name: res.name,
						// 	long: res.longitude,
						// 	lat: res.latitude
						// });
					}
				})
			},
			// 显示弹出城市选择
			changeShow(name) {
				uni.hideKeyboard();
				this.$refs[name].show();
			},
			// 点击确认的回调
			confirm(e) {
				let [a, b, c] = e.data.label;
				this.shipItem.province = a;
				this.shipItem.city = b;
				this.shipItem.district = c;
				this.citySet.defaultValue = e.data.value;
			},
			
			// 是否默认
			onCheckBox(e) {
				if(e.detail.value[0] == '1'){
					this.shipItem.is_default = 1
				}else{
					this.shipItem.is_default = 0
				}
			},
			// 修改用户地址
			async setAddress() {
				var a = await this.$http.editAddress(this.shipItem);
				
				if(this.is_default == 1) {
					setTimeout(() => {
						this.$http.setDefaultAddress({addressid:a.data}).then((data) => {
							uni.showToast({
								title: a.message,
								icon: 'none'
							});
							// console.log(data);
							// uni.navigateBack();
						}) 
					},500)
				}
				
				if(a.code == 200) {
					uni.showToast({
						title: a.message,
						icon: 'none'
					});
					
					return
				}
				
				
			},
			
			// 删除收货地址
			async delAddress(){
				var a = await this.$http.delAddress({addressid: this.shipItem.addressid})
				if(a.code == 200) {
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack();
					},500)
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
				
				
			},
			
		},
	}
</script>

<style lang="scss" scoped>
@import 'static/css/smallCommon.scss';
</style>
